<template>
	<view class="container">
		<!-- 商品图片 -->
		<swiper class="product-swiper" circular indicator-dots autoplay>
			<swiper-item v-for="(item, index) in product.images" :key="index">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<!-- 商品信息 -->
		<view class="product-info">
			<view class="price-box">
				<text class="price">¥{{ product.price }}</text>
				<text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
			</view>
			<view class="name-box">
				<text class="name">{{ product.name }}</text>
			</view>
			<view class="sales-box">
				<text class="sales">已售 {{ product.sales }}</text>
			</view>
		</view>
		
		<!-- 商品规格 -->
		<view class="spec-box">
			<view class="spec-title">
				<text>规格</text>
			</view>
			<view class="spec-content">
				<view 
					class="spec-item" 
					v-for="(item, index) in product.specs" 
					:key="index"
					:class="{ active: selectedSpec === index }"
					@click="selectSpec(index)"
				>
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="detail-box">
			<view class="detail-title">
				<text>商品详情</text>
			</view>
			<view class="detail-content">
				<rich-text :nodes="product.detail"></rich-text>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="left">
				<view class="icon-box" @click="goHome">
					<text class="iconfont icon-home"></text>
					<text>首页</text>
				</view>
			</view>
			<view class="right">
				<button class="btn cart-btn" @click="addToCart">加入购物车</button>
				<button class="btn buy-btn" @click="buyNow">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: 0,
			selectedSpec: 0,
			product: {
				id: 0,
				name: '',
				price: 0,
				originalPrice: 0,
				sales: 0,
				specs: [],
				images: [],
				detail: ''
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id
			this.getProductDetail()
		}
	},
	methods: {
		getProductDetail() {
			// 模拟获取商品详情
			setTimeout(() => {
				this.product = {
					id: this.id,
					name: '新鲜草莓',
					price: 38.8,
					originalPrice: 45.8,
					sales: 999,
					specs: ['250g/盒', '500g/盒', '1kg/盒'],
					images: [
						'/static/product/strawberry.jpg'
					],
					detail: '<p style="text-align:center;"><img src="/static/product/strawberry.jpg" style="max-width:100%;"></p><p>新鲜草莓，产地直采，当季上市。</p><p>特点：个大饱满，色泽鲜艳，甜酸可口。</p><p>建议：收到后请及时食用，可冷藏保存。</p>'
				}
			}, 500)
		},
		selectSpec(index) {
			this.selectedSpec = index
		},
		goHome() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		goCart() {
			uni.switchTab({
				url: '/pages/cart/cart'
			})
		},
		addToCart() {
			uni.showToast({
				title: '已加入购物车',
				icon: 'success'
			})
		},
		buyNow() {
			uni.navigateTo({
				url: '/pages/order/create?productId=' + this.id + '&spec=' + this.selectedSpec
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	padding-bottom: 100rpx;
}

.product-swiper {
	width: 100%;
	height: 750rpx;
	
	image {
		width: 100%;
		height: 100%;
	}
}

.product-info {
	padding: 30rpx;
	background-color: #fff;
	
	.price-box {
		margin-bottom: 20rpx;
		
		.price {
			font-size: 48rpx;
			color: #ff5151;
			font-weight: bold;
		}
		
		.original-price {
			font-size: 32rpx;
			color: #999;
			text-decoration: line-through;
			margin-left: 20rpx;
		}
	}
	
	.name-box {
		margin-bottom: 20rpx;
		
		.name {
			font-size: 36rpx;
			color: #333;
			line-height: 1.5;
		}
	}
	
	.sales-box {
		.sales {
			font-size: 28rpx;
			color: #999;
		}
	}
}

.spec-box {
	margin-top: 20rpx;
	padding: 30rpx;
	background-color: #fff;
	
	.spec-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.spec-content {
		display: flex;
		flex-wrap: wrap;
		
		.spec-item {
			padding: 10rpx 30rpx;
			border-radius: 30rpx;
			background-color: #f5f5f5;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			
			text {
				font-size: 28rpx;
				color: #666;
			}
			
			&.active {
				background-color: #fff2f0;
				border: 1px solid #ff5151;
				
				text {
					color: #ff5151;
				}
			}
		}
	}
}

.detail-box {
	margin-top: 20rpx;
	padding: 30rpx;
	background-color: #fff;
	
	.detail-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.detail-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
}

.bottom-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100rpx;
	background-color: #fff;
	border-top: 1px solid #eee;
	display: flex;
	z-index: 99;
	
	.left {
		display: flex;
		
		.icon-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 120rpx;
			
			.iconfont {
				font-size: 40rpx;
				color: #666;
			}
			
			text {
				font-size: 22rpx;
				color: #666;
				margin-top: 5rpx;
			}
		}
	}
	
	.right {
		flex: 1;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 10rpx;
		
		.btn {
			height: 70rpx;
			border-radius: 35rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			margin: 0 10rpx;
		}
		
		.cart-btn {
			background-color: #ffeaea;
			color: #ff5151;
			border: 1px solid #ff5151;
		}
		
		.buy-btn {
			background-color: #ff5151;
			color: #fff;
			border: none;
		}
	}
}
</style> 